<template>
	<view :class="['qn-page-' + theme]">
		<view class="top-view clearfix">
			<scroll-view scroll-x class="top-aside float_left">
				<view
					v-for="(item, index) in college_list"
					:key="index"
					class="top-item"
					:class="[item.categoryName === categoryName ? 'top-on primary-color' : '']"
					@click="tabtap(item)"
				>
					{{ item.categoryName }}
				</view>
			</scroll-view>
			<view class="float_right type-view" @click="changeStyle"><text class="ibonfont" :class="[is_list ? 'ibonfenlei1' : 'ibonfenlei2']"></text></view>
		</view>

		<scroll-view scroll-y class="goods-scroll">
			<block v-for="(item, index) in goods_list" :key="index"><GoodsItem :isList="is_list" :item="item" @addCart="addCart"></GoodsItem></block>
		</scroll-view>
		<AddCardModel @close="closeaddcartPop" :isShow="show_sku" :goodsId="goods_id"></AddCardModel>
		<NoLoginTip :show="tip_show" @cancel="tip_show = false"></NoLoginTip>
	</view>
</template>

<script>
import AddCardModel from '@/components/AddCardModel';
import GoodsItem from '../../components/GoodsItem.vue';
export default {
	components: {
		GoodsItem,
		AddCardModel,
	},
	data() {
		return {
			goods_id: 0,
			show_sku: false,
			is_list: true,
			categoryName: '',
			college_list: [],
			goods_list: []
		};
	},
	onShow() {
		this.collectList();
	},
	onPullDownRefresh() {
		this.collectList();
	},
	methods: {
		// 获取收藏商品
		collectList() {
			this.$u.api.collectList().then(({ data }) => {
				uni.stopPullDownRefresh();
				if (data.length) {
					this.college_list = data;
					this.goods_list = data[0].data;
					this.categoryName = data[0].categoryName;
				}
			});
		},
		tabtap(row) {
			if (this.categoryName === row.categoryName) {
				return;
			}
			this.categoryName = row.categoryName;
			this.goods_list = row.data;
		},
		// 切换商品列表展示样式
		changeStyle() {
			this.is_list = !this.is_list;
		},
		// 关闭加入购物车弹窗
		closeaddcartPop() {
			this.show_sku = false;
		},
		// 加入购物车弹窗
		addCart(row) {
			this.goods_id = row.id;
			this.show_sku = true;
		}
	}
};
</script>

<style lang="scss">
.top-view {
	background-color: #fff;
	border-bottom: 1upx solid #f5f5f5;
	position: fixed;
	line-height: 90upx;
	width: 100%;
	top: 0;
	left: 0;
	height: 90upx;
	.top-aside {
		width: 648upx;
		padding: 0 10upx;
		white-space: nowrap;
		z-index: 999;
		.top-item:first-child {
			margin-left: 0;
		}

		.top-item {
			display: inline-block;
			line-height: 0upx;
			margin-right: 40upx;
			font-size: 28upx;
			color: $font-color-base;
		}
		.top-on {
			color: $uni-color-primary;
		}
	}
	.type-view {
		width: 80rpx;
		text-align: center;
		.ibonfont {
			font-size: 36upx;
			color: #909399;
		}
	}
}

.goods-scroll {
	padding-top: 100upx;
	height: 100vh;
}
.flist-no {
	padding: 0 24upx 0 40upx;
}
</style>
